<template>
	<van-form
		ref="form"
		@submit="onFormSubmit"
		@failed="onFormFailed"
		:show-error-message="false"
		class="form"
		:disabled="saving"
	>
		<label class="required">姓名</label>
		<van-field v-model="form.name" name="name" placeholder="请填写姓名" :rules="rules.name">
		</van-field>
		<label class="required">手机号</label>
		<van-field
			v-model="form.mobile"
			name="mobile"
			placeholder="请填写手机号"
			type="tel"
			maxlength="11"
			:rules="rules.mobile"
		>
		</van-field>
		<label class="required">城市</label>
		<van-field
			v-model="form.address"
			name="address"
			placeholder="请选择城市"
			readonly
			:rules="rules.address"
			@click="openAreaPopup"
		>
			<van-icon slot="right-icon" name="arrow" color="#ccc"></van-icon>
		</van-field>
		<label>推荐人</label>
		<van-field v-model="form.promoter" name="promoter" placeholder="请填写推荐人"> </van-field>
		<label class="required">课程选择</label>
		<van-field
			class="check"
			v-model="form.course_id"
			name="course_id"
			:rules="rules.course"
			type="number"
		>
			<van-row slot="input" gutter="10">
				<van-col v-for="(item, index) in courseList" :key="index" span="12">
					<div
						class="ellipsis check-item"
						:class="{ active: form.course_id == item.id }"
						@click="courseClick(item)"
					>
						{{ item.course }}
					</div>
				</van-col>
			</van-row>
		</van-field>
		<div>
			<van-button
				class="submit"
				round
				block
				:loading="saving"
				loading-text="提交中..."
				native-type="submit"
			>
				立即报名
			</van-button>
		</div>
		<van-popup v-model="areaPopup" round position="bottom">
			<van-area
				ref="area"
				:area-list="areaList"
				@confirm="confirmAreaPopup"
				@cancel="closeAreaPopup"
				columns-num="2"
			>
			</van-area>
		</van-popup>
	</van-form>
</template>
<script>
import { areaList } from "@/assets/address";

export default {
	props: {
		tpl: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			areaList,
			areaPopup: false,
			saving: false,
			form: {
				name: "",
				mobile: "",
				address: "",
				promoter: "",
				area: [],
				course_id: 0
			},
			rules: {
				name: [{ required: true, message: "请填写姓名" }],
				mobile: [
					{ required: true, message: "请填写手机号" },
					{
						pattern: /^[1][3-9][0-9]{9}$/,
						message: "请填写正确的手机号"
					}
				],
				address: [{ required: true, message: "请选择城市" }],
				course: [{ required: true, type: "array", message: "请选择课程" }]
			},
			courseList: []
		};
	},
	created() {
		this.getCourseList();
	},
	methods: {
		async getCourseList() {
			const res = await this.$api.getCourse();
			this.courseList = res;
			this.form.course_id = (res[0] || {}).id ?? "";
		},
		// 表单确认
		async onFormSubmit(values) {
			let toast = this.$toast.loading();
			this.saving = true;
			let area = this.form.area;
			let params = {
				...values,
				address: area[area.length - 1].name,
				course_id: values.course_id * 1,
				bra_id: this.tpl.bra_id ?? 0
			};
			const res = await this.$api
				.courseSingUp(params)
				.catch((err) => {
					toast.clear();
					this.$toast(err || "报名失败");
					throw err;
				})
				.finally(() => {
					this.saving = false;
					// toast.clear();
				});
			// this.$toast.success("提交报名成功");
			toast.clear();
			this.$emit("confirm");
			window.location.href = res.url;
		},
		// 表单错误
		onFormFailed({ errors }) {
			this.$toast(errors[0].message);
		},
		courseClick(item) {
			this.form.course_id = item.id;
		},
		reset() {
			this.form = {
				name: "",
				mobile: "",
				address: "",
				promoter: "",
				area: [],
				course_id: (this.courseList[0] || {}).id
			};
			this.$refs.form.resetValidation();
		},
		// 确认选地区
		confirmAreaPopup(val) {
			this.form.area = val;
			this.form.address = val
				.map(function (item) {
					return item.name;
				})
				.join("-");
			this.closeAreaPopup();
		},
		// 打开选地区
		openAreaPopup() {
			this.areaPopup = true;
			let area = this.form.area;
			this.$nextTick(() => {
				if (area.length > 0) {
					this.$refs.area.reset(area[area.length - 1].code);
				}
			});
		},
		// 关闭选地区
		closeAreaPopup() {
			this.areaPopup = false;
		}
	}
};
</script>
//
<style lang="scss" scoped>
/* 表单 */
.form {
	padding: 15px;
	label {
		font-size: 14px;
		color: #666;
		position: relative;
		&.required::after {
			content: "*";
			position: absolute;
			right: -8px;
			top: 0;
			color: red;
		}
	}
	.submit {
		animation: scale 3s linear infinite;
		font-weight: 600;
		font-size: 16px;
		margin: 30px 0 10px;
		height: 48px;
	}
	::v-deep .van-cell {
		margin: 8px 0;
		border: 1px solid #eee;
		border-radius: 6px;
		padding: 6px 8px;
		&::after {
			border: none;
		}
	}
	.check {
		background-color: transparent;
		border: none;
		margin: 0;
		padding: 0;
		::v-deep .van-row {
			width: 100%;
		}
		&-item {
			text-align: center;
			border: 1px solid #eee;
			border-radius: 6px;
			padding: 6px 10px;
			background: #fff;
			margin-top: 10px;
			transition: all 0.25s ease;
			&.active {
				color: #eb6100;
				background: #fff8f2;
				border-color: #eb6100;
				font-weight: 600;
			}
		}
	}
}
</style>
